<!-- <template>
    <van-cell-group>
        <van-cell title="首页" />
        <div v-for="item in homeData" :key="item.id">
            <van-card
                :num="item.stock"
                :price="item.price.toFixed(2)"
                :desc="item.description"
                :title="item.name"
                :thumb="item.image"
            />
        </div>
    </van-cell-group>
</template>

<script setup>
import {ref, onMounted} from "vue"
import {AxiosResponse} from "axios"
import {getHomeData} from "../../api"

const homeData = ref([]);

const getData = async () => {
    let res: AxiosResponse = await getHomeData()
    console.log(res)
    if (res.status === 200) {
        homeData.value = res.data;
    }
}

onMounted(() => {
    getData()
})
</script> -->


<template>
  <div class="page-container">
    <van-nav-bar title="万云茶庄" fixed placeholder safe-area-inset-top />
    
    <div class="content">
      <van-search 
        v-model="searchValue" 
        placeholder="搜索茶叶" 
        shape="round"
        @search="onSearch"
      />
      
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in banners" :key="index">
          <van-image :src="item.image" height="180" fit="cover" />
        </van-swipe-item>
      </van-swipe>
      
      <van-grid :border="false" :column-num="4" class="category-grid">
        <van-grid-item 
          v-for="(item, index) in categories" 
          :key="index" 
          :icon="item.icon" 
          :text="item.name"
        />
      </van-grid>
      
      <div class="section-title">
        <van-icon name="fire" color="#ee0a24" />
        <span>热门推荐</span>
      </div>
      
      <van-card
        v-for="item in homeData"
        :key="item.id"
        :price="item.price.toFixed(2)"
        :desc="item.description"
        :title="item.name"
        :thumb="item.image"
        :origin-price="(item.price * 1.2).toFixed(2)"
        @click="viewProduct(item.id)"
      >
        <template #tags>
          <van-tag plain type="danger">库存: {{ item.stock }}</van-tag>
        </template>
        <template #footer>
          <van-button size="mini" type="primary" @click.stop="addToCart(item)">加入购物车</van-button>
        </template>
      </van-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { showToast } from 'vant'
import { getHomeData } from '../api'
import type { HomeProduct } from '../api/interface'

const searchValue = ref('')
const homeData = ref<HomeProduct[]>([])

// 模拟数据
const banners = ref([
  { id: 1, image: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg' },
  { id: 2, image: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg' }
])

const categories = ref([
  { id: 1, name: '绿茶', icon: 'leaf' },
  { id: 2, name: '红茶', icon: 'leaf' },
  { id: 3, name: '乌龙茶', icon: 'leaf' },
  { id: 4, name: '普洱茶', icon: 'leaf' },
  { id: 5, name: '白茶', icon: 'leaf' },
  { id: 6, name: '花茶', icon: 'leaf' },
  { id: 7, name: '茶具', icon: 'shop' },
  { id: 8, name: '礼盒', icon: 'gift' }
])

const getData = async () => {
  try {
    const res = await getHomeData()
    if (res.status === 200) {
      homeData.value = res.data
    }
  } catch (error) {
    showToast('获取数据失败')
  }
}

const onSearch = () => {
  showToast(`搜索: ${searchValue.value}`)
}

const viewProduct = (id: number) => {
  // 实际项目中跳转到商品详情页
  showToast(`查看商品 ${id}`)
}

const addToCart = (product: HomeProduct) => {
  // 实际项目中调用加入购物车API
  showToast(`已添加: ${product.name}`)
}

onMounted(() => {
  getData()
})
</script>

<style scoped>
.page-container {
  padding-bottom: 50px;
}

.content {
  padding: 10px;
}

.my-swipe {
  margin: 10px 0;
  border-radius: 8px;
  overflow: hidden;
}

.category-grid {
  margin: 15px 0;
}

.section-title {
  display: flex;
  align-items: center;
  margin: 15px 0;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.section-title span {
  margin-left: 5px;
}

.van-card {
  margin-bottom: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.van-card__title {
  font-size: 15px;
  font-weight: bold;
}

.van-card__price {
  color: #ee0a24;
  font-weight: bold;
}

.van-card__origin-price {
  font-size: 12px;
}
</style>